
<title>发放工资 - 工资结算管理</title>
<link href="lib/assets/css/chosen.css "/>
<link rel="stylesheet" type="text/css" href="lib/assets/css/ui.jqgrid.css" media="all"/>
<script src="lib/assets/js/chosen.jquery.js"></script>
<script src="lib/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
<script src="lib/assets/js/date-time/bootstrap-datetimepicker.js"></script>
<script src="lib/assets/js/date-time/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" href="lib/assets/css/bootstrap-datetimepicker.min.css" />
<script src="lib/assets/js/tableExport.js"></script>
<script src="lib/assets/js/jspdf/libs/mybase64.js"></script>
<script src="lib/assets/js/dataTables/jquery.dataTables.js" charset="utf-8"></script>
<script src="lib/assets/js/dataTables/jquery.dataTables.bootstrap.js" charset="utf-8"></script>
<script src="lib/assets/js/dataTables/extensions/TableTools/js/dataTables.tableTools.js" charset="utf-8"></script>


<div class="row">
	<div class="col-xs-12 col-md-12 col-lg-12">

		<div class="widget-box">
			<div class="widget-header">选择查询条件</div>

			<div class="widget-body" style="display: block;">
				<form id="conditionForm" action="" method="post">
					<div class="widget-main">
						<div class="row">
							<div class="col-md-3 col-md-push-1 col-lg-3 col-lg-push-1" >
								<label>部门</label><br />
								<!-- 列表 -->
								<select id="depList" class="chosen-select form-control">								</select>
								
							</div>
							
							<div class="col-md-3 col-md-push-1 col-lg-3 col-lg-push-1">
								<label>员工编号</label><input type="text" id="staffId"  class="form-control"> <br />
							</div>
							
						</div>
						<div class="row">
							<div class="col-md-3 col-md-push-1 col-lg-3 col-lg-push-1">
				                <label for="dtp_input1" class="control-label">起始日期</label>
				                <div id="date-start" class="input-group date form_datetime" data-link-field="dtp_input1">
				                	<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
				                    <input id="date-start-in" class="form-control" type="text" value="" readonly>
				                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
									
				                </div>
								<input type="hidden" id="dtp_input1" value="" /><br/>
				            </div>
							
							
							<div class="col-md-3 col-md-push-1 col-lg-3 col-lg-push-1">
								<label for="dtp_input2" class="control-label">结束日期</label>
				                <div id="date-end" class="input-group date form_datetime" data-link-field="dtp_input2">
				                	<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
				                    <input id="date-end-in" class="form-control" type="text" value="" readonly>
				                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				                </div>
								<input type="hidden" id="dtp_input2" value="" /><br/>
							</div>
						
							<div class="col-md-3 col-md-push-1 col-lg-3 col-lg-push-1">
								<br /> 
								<input id="query" type="submit" value="查询" class="btn btn-primary" /> 
								<input type="button" value="重选" class="btn btn-primary" onclick="$('.chosen-select').val('').trigger('chosen:updated')"/>
								<input type="button" value="打印" class="btn btn-primary" id="printer" onclick="printTableToExcel($('#show'));"/>
							</div>
							
						</div>
					</div>
				</form>
			</div>
		</div>
		
		<br />
		
		<div class="clearfix">
			<div class="pull-right tableTools-container"></div>
		</div>
		
		<div class="table-responsive " >
			<table id="show" class="table table-bordered table-hover text-center">
  				<thead id="thead"></thead>
				<tbody id="tbody"></tbody> 
			</table>
			<div id="gridPager"></div>
		</div>
		
		
	
	</div>
	
	
</div>
<script type="text/javascript">
	var scripts = [null,  null];
       
	$('.page-content-area').ace_ajax('loadScripts',scripts,function() {
		
		//起始日期
		$("#date-start").datetimepicker({
			format: 'yyyy-mm',
			minView: 'year',
			startView: 3,
			language: 'zh-CN',
			autoclose: true,
			endDate: '+2m',
		})
		.on('changeDate', function(ev){
	        $('#date-end').datetimepicker('setStartDate', $("#date-start-in").val());
	        if ($("#date-start-in").val() > $("#date-end-in").val() && $("#date-end-in").val()!="") {
	        	alert("起始日期应小于等于结束日期,请重新调整");
	       		$('#date-start').datetimepicker('update');
	        }
		});

		
		//结束日期
		$("#date-end").datetimepicker({
			format: 'yyyy-mm',
			minView: 3,
			startView: 3,
			language: 'zh-CN',
			autoclose: true,
			endDate: '+2m'
		});
		
				            
		/* 动态加载[部门]列表 */
		$.ajax({
			type : "GET",
			url : "json/department_info.json",
			success : function(data) {
				
				var options = data;
				$("#depList").empty();
				$("#depList").append("<option value=\"\">所有部门</option>");
				for(var i=0;i<options.length;i++){
					var option = options[i];
					$("#depList").append("<option value=\"" + 
							option.dep_id + "\">" + 
							option.dep_name + "</option>");
				}
				if(!ace.vars['touch']) {
					$('.chosen-select').chosen({allow_single_deselect:true}); 
					//resize the chosen on window resize
			
					$(window)
					.off('resize.chosen')
					.on('resize.chosen', function() {
						$('.chosen-select').each(function() {
							 var $this = $(this);
							 $this.next().css({'width': $this.parent().width()});
						})
					}).trigger('resize.chosen');
					//resize chosen on sidebar collapse/expand
					$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
						if(event_name != 'sidebar_collapsed') return;
						$('.chosen-select').each(function() {
							 var $this = $(this);
							 $this.next().css({'width': $this.parent().width()});
						})
					});
			
					$('#chosen-multiple-style .btn').on('click', function(e){
						var target = $(this).find('input[type=radio]');
						var which = parseInt(target.val());
						if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
						 else $('#form-field-select-4').removeClass('tag-input-style');
					});
				}
			}
		});
						
		var tt;
		var oTable1;
		
		
		
		/* 查询参数为空的表单验证 和 异步加载查询结果 */
		$("#conditionForm").bind("submit",function() {
			var myData;
			var err = "";
			if ($("#date-start-in").val() == "" || $("#date-end-in").val() == "") {
				err += "请指定日期范围";
			}
			if ($("#date-start-in").val() > $("#date-end-in").val() && $("#date-end-in").val()!="") {
	        	err += "起始日期应小于等于结束日期,请重新调整";
	        }
			if (err == "") {
				/* 同步加载查询结果 */
			
				console.log(tt);
				$
				.ajax({
					async: false,
					type : "GET",
					url: "payrollSheet/payroll_Query",
				    data: {"depId":$("#depList").val(),"empId":$("#staffId").val(),"fromDate":$("#date-start-in").val(),"toDate":$("#date-end-in").val()},
				    
					success : function(data) {
						
						$(".tableTools-container").empty();
						
				//		$(oTable1).fnClearTable(0); //清空数据
				//		$("#show").DataTable().fnClearTable();
				
			  			$("#thead").empty();
						$("#tbody").empty();
						
						$("#thead").append("<tr id='htr'>");
						for(var o in data.col_name) {
							$("#htr").append("<th>"+data.col_name[o]+"</th>");
						}
						$("#thead").append("</tr>");
						
						for (var i = 0; i < data.col_data.datas.length; i++) {
							var row = data.col_data.datas[i];
							$("#tbody").append("<tr id='btr"+i+"'>");
							
							for(var o in data.col_name) {
								var colname = data.col_name[o];
								$("#btr"+i).append("<td>"+row[colname]+"</td>");
							}
							
							$("#tbody").append("</tr>");
						}

						//datatable
						
					//	oTable1 = $("#show").DataTable();
						//initiate TableTools extension
						oTable1 =$("#show").DataTable();
						$(oTable1).fnDraw(); //重新加载数据
						tt = new $.fn.dataTable.TableTools( oTable1, {
							"sSwfPath": "lib/assets/js/dataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf", //in Ace demo ../assets will be replaced by correct assets path
							
							"sRowSelector": "td:not(:last-child)",
							"sRowSelect": "multi",
					
							"sSelectedClass": "success",
					        "aButtons": [								
								{
									"sExtends": "print",
									"sToolTip": "Print view",
									"sButtonClass": "btn btn-white btn-primary  btn-bold",
									"sButtonText": "<i class='fa fa-print bigger-110 grey'></i>",
									
									"sMessage": "<div class='navbar navbar-default'><div class='navbar-header pull-left'><a class='navbar-brand' href='#'><small>Optional Navbar &amp; Text</small></a></div></div>",
									
									"sInfo": "<h3 class='no-margin-top'>Print view</h3>\
											  <p>Please use your browser's print function to\
											  print this table.\
											  <br />Press <b>escape</b> when finished.</p>",
								}
				        	]
					    } );
						
						$(tt.fnContainer()).appendTo(".tableTools-container");
						
						
					}   
				})
				
				return false;
			} else {
				alert(err);
				return false;
			}
		});

	});
</script>

